<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:not pseudo selector</title>
<style>
    .foo div {
       width: 3cm;
       height: 1.2cm;
       border: 1px solid black;
       padding: 0.5em;
       margin: 1em 0;
    }
    .bar {
       background-color: black;    
       color: white;
    }
    .foo :not(.bar) {
       background-color: red;
       color: blue;
    }
    .foo div[data-my-data="foobar"] {
       background-color: yellow;
    }
    .foo :not(div) {
       background-color: white;
       color: green;
    }
    li {
      color: green;
    }
    li:not(:first-child) {
       color: red;
    }
    #ul_test li:not([data-my-type="thin"]) {
       font-weight: bold;
    }
    .foo2 :not(.cls) {
       background: green;
    }
    .foo2 :not(#id) {
       color: red;
    }
    .foo2 div {
       background: black;
       color: white;
       border: 1px solid black;
       width: 3cm;
       height: 1.2cm;
    }
</style>
</head>
<body>
  <div class="foo">
    <div class="bar">
      Black (text is white)
    </div>
    <div class="zzz">
      Red (text is blue)
    </div>
    <div data-my-data="foobar">
      Yellow (text is blue)
    </div>
    <p>
       This text should not be green; should be bule text with red background.
    </p>
  </div>
  <div class="foo2">
    <div>
      Green(red text)
    </div>
    <div class="cls">
      Black(red text)
    </div>
    <div id="id">
      Green(white text)
    </div>
    <div id="id" class="cls">
      Black(white text)
    </div>
  </div>
  <ul id="ul_test">
    <li>Green Bold</li>
    <li data-my-type='thin'>Red Normal Weight</li>
    <li>Red Bold</li>
  </ul>
</body>
</html>
